<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body >
		
		<div id="app">
			<div >
			<h1>新增用户</h1>
			用户:<input type="text" v-model="addUser.name"  />
			年龄:<input type="text" v-model="addUser.age" />
			性别:<input type="text" v-model="addUser.sex" />
			<button @click="add">新增</button>
		</div>
		<div id="">
			<h1>修改用户</h1>
			ID:<input type="text" v-model="updateUser.id" disabled />
			用户:<input type="text" v-model="updateUser.name" />
			年龄:<input type="text" v-model="updateUser.age" />
			性别:<input type="text" v-model="updateUser.sex" />
			<button @click="toUpdate">修改</button>
		</div>
			<table  id="tab1" border="1px" width="80%" >
			
			<th colspan="5"><h1>用户列表</h1></th>
			<tr align="center">
				<th>编号</th>
				<th>用户名</th>
				<th>年龄</th>
				<th>性别</th>
				<th>操作</th>
			</tr>
			<tr align="center" v-for="user in userList">
				<td v-text="user.id"></td>
				<td v-text="user.name"></td>
				<td v-text="user.age"></td>
				<td v-text="user.sex"></td>
				<td>
					<button @click="updateBtn(user)">修改</button>
					<button @click="getDeleteById(user.id)">删除</button>
				</td>
			</tr>
			
		</table>
		</div>
		<script src="../js/axios.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			axios.defaults.baseURL="http://localhost:8090"
			const app = new Vue({
				el: '#app',
				data: {
					userList: [],
					addUser: {
						name: '',
						age: '',
						sex: ''
					},
					updateUser: {
						id: '',
						name: '',
						age: '',
						sex: ''
					}
					
				},
				methods:{
					 async getUserList(){
						 let {data:result} = await axios.get("/findAll")
						 console.log(result)
						 this.userList=result
						
					},
					async getDeleteById(id){
						let {data: result} = await axios.delete(`/user/${id}`)
						console.log(result)
						this.getUserList()
					},
					async add(){
						let {data:result} = await axios.post("/saveUser",this.addUser)
						console.log(result)
						this.getUserList()
						this.addUser={}
					},
					updateBtn(user){
						this.updateUser= user
						
					},
					async toUpdate(){
						let {data: result} = await axios.put("/updateUser",this.updateUser)
						console.log(result)
						this.getUserList()
						this.updateUser = {}
					}
					
					
				},
				created() {
					this.getUserList()
				}
			})
		</script>
	</body>
</html>
